<script setup lang="ts">
import { onBeforeRouteUpdate, useRoute } from 'vue-router';
import HistoryLink from './admin/historyLink.vue';
import { CacheEnum } from '@/enum/cacheEnum';
import menuStore from '@/store/menu-store';
import Navbar from './admin/navbar.vue';
import menu from '@/composable/menu';
import Menu from './admin/menu.vue';
import utils from '@/utils';
import { watch } from 'vue';
const route = useRoute();
// const menu = menuStore();
watch(
  route,
  () => {
    menu.addHistoryMenu(route);
  },
  { immediate: true }
);
</script>

<template>
  <div class="admin w-full h-screen grid md:grid-cols-[auto_1fr]">
    <Menu />
    <div class="content bg-gray-100 grid grid-rows-[auto_1fr]">
      <div>
        <Navbar />
        <HistoryLink class="hidden md:block" />
      </div>
      <div class="p-3 relative overflow-y-auto">
        <router-view #default="{ Component }">
          <transition
            appear
            class="animate__animated"
            :enter-active-class="route.meta.enterClass ?? 'animate__fadeInUp'"
            :leave-active-class="route.meta.leaveClass ?? 'animate__fadeInUp'"
          >
            <component :is="Component" class="absolute w-full" />
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  route: { meta: { auth: true } }
};
</script>
<style lang="scss" scoped>
.animate__fadeInUp {
  --animate-duration: 0.5s;
}
</style>
